<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            margin: 0% auto;
            border-collapse: collapse; /*表格间的距离*/
            height: 205px;
            width: 460px;
            text-align: center;
        }

        td,
        th {
            border: 1px solid;
        }
    </style>
    <script>
        window.onload = function () {
            var a = document.getElementById('choos');//首先获取全选复选框
            a.onchange = function () {
                var b = document.getElementsByName('my')//通过name属性获取其他复选框
                for (var c of b) {  //通过循环将每个复选框的checked属性设为和全选复选框的checked属性相同
                    c.checked = this.checked
                    //实现点击全选其他复选框也会选择
                }

            }

            //实现当其他复选框被全部选中时，全选复选框自动被选中
            var c = document.getElementsByName('my')//获取其他复选框
            for (var z of c) {  //通过循环为每个复选框绑定事件
                z.onchange = function () {
                    a.checked = true;  //当点击任何一个复选框时都会全选复选框都会被选中
                    for (var s of c) {  //创建循环得到每个复选框的checked属性
                        if (s.checked == false) { //判断如果有任何一个复选框没有被选中则全选复选框也不会被选中
                            a.checked = false;
                            break;
                        }
                    }
                }

            }







        }
    </script>
</head>

<body>
    <table id="box">
        <thead>
            <tr>
                <th><input type="checkbox" id="choos"><label for="choos">全选</label></th>
                <th>水果</th>
                <th>香烟</th>
                <th>饮料</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" name="my"></td>
                <td>苹果</td>
                <td>中华</td>
                <td>雪碧</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="my"></td>
                <td>香蕉</td>
                <td>人民大会堂</td>
                <td>可乐</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="my"></td>
                <td>橘子</td>
                <td>利群</td>
                <td>茉莉花茶</td>
            </tr>
        </tbody>
    </table>
</body>

</html>